<template>
	<view class="box">
	  <!-- 标题区域 -->
	  <view class="title">我的预约记录</view>

	  <!-- 查询区域 -->
	  <view class="search-box">
	    <input class="search-input" placeholder="请输入挂号单编号" v-model="data.registrationNumber" />
	    <button class="search-btn" @click="load()">查询</button>
	    <button class="reset-btn" @click="reset()">重置</button>
	  </view>

	  <!-- 预约记录列表 -->
	  <view v-if="data.tableData.length" class="appointment-list">
	    <view v-for="item in data.tableData" :key="item.id" class="appointment-item">
	      <view class="appointment-info">
	        <text class="appointment-text">挂号单编号：{{ item.registrationNumber }}</text>
	        <text class="appointment-text">医生姓名：{{ item.doctorName }}</text>
	        <text class="appointment-text">挂号科室：{{ item.department }}</text>
	        <text class="appointment-text">挂号日期：{{ item.registrationDate }}</text>
	        <text class="appointment-text">预约时间：{{ item.visitDateTime }}</text>
	        <text class="appointment-text">状态：<span :class="getStatusTagClass(item.status)">{{ item.status }}</span></text>
	        <text class="appointment-text">创建时间：{{ item.createdTime }}</text>
	        <text class="appointment-text">更新时间：{{ item.updatedTime }}</text>
	      </view>
	    </view>
	  </view>

	  <!-- 无数据提示 -->
	  <view v-if="!data.tableData.length" class="no-data">暂无预约记录</view>

	  <!-- 分页区域 -->
	  <view v-if="data.total > 0" class="pagination">
	    <button @click="handlePageChange(data.pageNum - 1)" :disabled="data.pageNum === 1">上一页</button>
	    <text>第 {{ data.pageNum }} 页，共 {{ totalPages }} 页</text>
	    <button @click="handlePageChange(data.pageNum + 1)" :disabled="data.pageNum === totalPages">下一页</button>
	  </view>
	</view>
</template>
<style scoped>
.box {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}
.title {
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}
.search-box {
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
}
.search-input {
  width: 350rpx;
  padding: 15rpx;
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  font-size: 26rpx;
}
.search-btn, .reset-btn {
  margin-left: 15rpx;
  padding: 15rpx 30rpx;
  font-size: 26rpx;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  cursor: pointer;
}
.reset-btn {
  background-color: #f56c6c;
}
.appointment-item {
  padding: 25rpx;
  background-color: #f9f9f9;
  border-radius: 12rpx;
  box-shadow: 0 3rpx 10rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 25rpx;
}
.appointment-info {
  font-size: 26rpx;
  color: #333;
}
.appointment-text {
  margin-bottom: 12rpx;
}
.no-data {
  text-align: center;
  font-size: 28rpx;
  color: #888;
  margin-top: 60rpx;
}
.pagination {
  margin-top: 30rpx;
  display: flex;
  justify-content: center;
}
button {
  padding: 12rpx 28rpx;
  border: none;
  background-color: #409eff;
  color: white;
  border-radius: 8rpx;
  font-size: 26rpx;
  cursor: pointer;
  margin: 0 12rpx;
}
button:disabled {
  background-color: #ccc;
}
.status-success {
  color: #67c23a;
}
.status-danger {
  color: #f56c6c;
}
.status-info {
  color: #409eff;
}
.status-warning {
  color: #e6a23c;
}
.status-primary {
  color: #909399;
}
</style>
<script setup>
import { reactive, computed } from 'vue'
import { getMyreservationsApi } from '../../../utils/api/myreservations'

// 定义响应式数据
const data = reactive({
  tableData: [],  // 预约记录
  pageNum: 1,     // 当前页码
  pageSize: 5,    // 每页显示数量
  total: 0,       // 总记录数
  registrationNumber: null,  // 查询条件
  user: uni.getStorageSync('system-user'),  // 获取当前用户信息
})

// 加载预约记录
const load = () => {
  getMyreservationsApi({
    pageNum: data.pageNum,
    pageSize: data.pageSize,
    registrationNumber: data.registrationNumber,
    patientId: data.user.id
  }).then(res => {
    if (res.code === '200') {
      data.tableData = res.data.list || []
      data.total = res.data.total
    } else {
      uni.showToast({
        title: '获取失败',
        icon: 'error',
        duration: 1000
      })
    }
  }).catch(() => {
    uni.showToast({
      title: '请求出错',
      icon: 'error',
      duration: 1000
    })
  })
}

// 重置查询
const reset = () => {
  data.registrationNumber = null
  load()
}

// 页码变化
const handlePageChange = (newPage) => {
  if (newPage > 0 && newPage <= totalPages) {
    data.pageNum = newPage
    load()
  }
}

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(data.total / data.pageSize)
})

// 获取状态标签的样式
const getStatusTagClass = (status) => {
  switch (status) {
    case '挂号成功，等待叫号':
      return 'status-success'
    case '预约失败':
      return 'status-danger'
    case '已叫号':
      return 'status-info'
    case '等待处理':
      return 'status-warning'
    default:
      return 'status-primary'
  }
}

// 页面初始化加载数据
load()
</script>
